<template>
  <div class="home-container">
    <!-- 标题导航 -->
     <van-nav-bar  class="app-nav-bar">
       <van-button slot="title" icon="search" class="search-btn" round type="info" to="/search">搜素</van-button>
     </van-nav-bar>

     <!-- tab标签 -->
     <van-tabs v-model="active" swipeable class="channel-tabs">
      <van-tab :title="item.name" v-for="(item) in channels" :key="item.id">
        <article-list :channel='item'></article-list>
      </van-tab>
      <!-- 汉堡图标定位将列表的数据挡住, 解决办法就是在这里添加一个占位元素(宽度和汉堡宽度一样) -->
      <!-- 具名插槽可以多个 -->
      <div  slot="nav-right" class="wap-nav-placeholder"></div>
      <div class="wap-nav-wrap" slot="nav-right"  @click="isChannelEditShow = true">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 编辑频道弹出层 -->
    <van-popup
      v-model="isChannelEditShow"
      position="bottom"
      class="channel-edit-popup"
      closeable
      close-icon-position="top-left"
      get-container="body"
      style="height: 100%"
    >
    <channel-edit :user-channels='channels' @close='isChannelEditShow = false' @update-active='active = $event' :active='active'/>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import ArticleList from './components/article-list'
import ChannelEdit from './components/channel-edit'
import { getItem } from '@/utils/storage'
import { mapState } from 'vuex'
export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  props: {},
  data () {
    return {
      active: 0,
      channels: [],
      isChannelEditShow: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted () {
    this.getUserChannels()
  },
  methods: {
    async getUserChannels () {
      // 1. 用户登录获取线上频道
      // 2. 用户不登录, 判断本地数是否有频道数据, 否则使用默认推荐( 和登录的一样(是否有token) )
      let channels = []
      if (this.user) { // 用户已登录
        const { data } = await getUserChannels()
        channels = data.data.channels
      } else { // 未登录, 判断本地是否有数据, 有使用, 否则使用默认推荐(不使用token)
        const localChannels = getItem('user-channels')
        if (localChannels) {
          channels = localChannels
        } else {
          const { data } = await getUserChannels() // 没有token
          channels = data.data.channels
        }
      }
      this.channels = channels
    }
  }
}
</script>
<style lang='less' scoped>
.home-container {
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 277px;
    height: 32px;
    background-color: #5babfb;
    border: 0;
  }
  .van-icon {
    font-size: 16px;
  }
  .van-button__text {
    font-size: 14px;
  }
  .channel-tabs {
    /deep/ .van-tab {
      border-right: 1px solid #edeff3;
      // border-bottom: 1px solid #edeff3;
    }
    /deep/ .van-tabs__line {
      width: 15px !important;
      height: 3px;
      background-color: #3296fa;
      bottom: 20px;
    }
  }
  .wap-nav-wrap {
    position: fixed;
    right: 0;
    width: 33px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    opacity: .9;
    .van-icon {
      font-size: 24px;
    }
    &:before {
      content: '';
      position: absolute;
      left: 4px;
      width: 1px;
      height: 43px;
      background: -webkit-linear-gradient(white, #eee, white);
    }
  }
  .wap-nav-placeholder {
    width: 33px;
    flex-shrink: 0;
  }
}
</style>
